﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
    <style type="text/css">
        .dropArea
        {
        	display:block;
        	width:200px;
        	height:200px;
        	background-color:#ececec;
        }
    </style>
</head>
<body>

    <script type="text/javascript">
        //http://base64img.com/base64.js
        //http://www.html5rocks.com/en/tutorials/file/dndfiles/



        function dd(e) {
            e.stopPropagation();
            e.preventDefault();
            //console.log("drop", e, e.dataTransfer.files);
            console.log("droped", e.dataTransfer.files.length);
            console.log("droped", e.dataTransfer.files[0].name);
            handleFile(e.dataTransfer.files[0]);
        }


        function handleFile(file) {

            console.log(file);
            var name = file.name;
            var size = file.size;

            var reader = new FileReader();
            console.log(reader);

            reader.onload = function (e) {
                console.log("finish load", e);
            };
            reader.onloadstart = (function () {
                console.log("load start");
            }); 
            reader.onerrror = function (e) {
                console.log("reader error", e);
            };
            reader.onprogress = function (e) {
                if (e.lengthComputable) {
                    var total = e.total;
                    var curr = e.loaded;
                    var percent = parseInt(curr / (total / 100));
                    console.log('uploaded ', percent, '%');
                }

            }

            reader.readAsDataURL(file);

        }

        $(document).ready(function () {
            document.getElementById("aa").addEventListener("drop", dd, false);  

            /*$(".dropArea").bind(
                {
                    dragover: function () {
                        console.log("dragover");
                    },
                    dragend: function () {
                        console.log("dragend");
                    },
                    drop: function (e) {
                        e.stopPropagation(); 
                        e.preventDefault();
                        console.log("drop", e.dataTransfer.files);
                    }
                });


                */
        });
    </script>

    <form id="form1" runat="server">
    <div class="dropArea" id="aa">
    
    </div>
    </form>
</body>
</html>
